diff --git a/templates/base.html b/templates/base.html
index 10cce88..4ca9e4e 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -52,7 +52,15 @@
         <li><a href="{{ link }}" target="_blank">{{ name }}</a></li>
         {% endfor %}
         {% for name, link in SOCIAL %}
-        <li><a href="{{ link }}" target="_blank">{{ name }}<i class="fa fa-{{ name|lower|replace('email', 'envelope')|replace('\255', '-')|replace('+', 'plus')}} fa-lg"></i></a></li>
+        {% if 'email' in name|lower %}
+        {% if MANGLE_EMAILS %}
+        <li><a data-email="{{ link|reverse }}" title="You need javascript enabled to view this email" href="#" class="email" target="_blank">{{ name }}<i class="fa fa-envelope fa-lg"></i></a></li>
+        {% else %}
+        <li><a href="{{ link }}" target="_blank">{{ name }}<i class="fa fa-envelope fa-lg"></i></a></li>
+        {% endif %}
+        {% else %}
+        <li><a href="{{ link }}" target="_blank">{{ name }}<i class="fa fa-{{ name|lower|replace('\255', '-')|replace('+', 'plus')}} fa-lg"></i></a></li>
+        {% endif %}
         {% endfor %}
       </ul>
     </div>
@@ -103,6 +111,20 @@
   </script>
   {% endif %}
 
+  {% if MANGLE_EMAILS %}
+  <script type="text/javascript">
+    window.onload = function(){
+      var e = document.querySelectorAll(".email");
+      for (var i = 0; i < e.length; i++) {
+        e[i].href = e[i].getAttribute("data-email").split("").reverse().join("");
+        e[i].removeAttribute("data-email");
+        e[i].removeAttribute("title");
+        e[i].removeAttribute("class");
+      }
+    };
+  </script>
+  {% endif %}
+
   {% if FORCE_PIXELS %}
   <script type="text/javascript">
     var ratio = 1/window.devicePixelRatio;